import React from 'react';
import { Breadcrumb, Layout, Menu, theme, Flex, Button, Grid, Col, Row, Tabs } from 'antd';
//import Details from './Details';
import type { TabsProps } from 'antd';
import BasicInformation from './BasicInformation';
import Preview from './Preview';
import Recording from './Recording';
import Permissions from './Permissions';
import AuditModeal from './Modal/AuditModal';
import PassModeal from './Modal/PassModal';
import OverruleModal from './Modal/OverruleModal';



const { Header, Content, Footer } = Layout;



// const items = new Array(15).fill(null).map((_, index) => ({
//     key: index + 1,
//     label: `nav ${index + 1}`,
// }));

const onChange = (key: string) => {
    console.log(key);
};

const items: TabsProps['items'] = [
    {
        key: '1',
        label: '基础信息',
        children: <BasicInformation />,
    },
    {
        key: '2',
        label: '商品预览',
        children: <Preview />,
    },
    {
        key: '3',
        label: '权限管理',
        children: <Permissions />,
    },

];



const Details: React.FC = () => {
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();

    return (
        <Layout>
            <Header style={{ display: 'flex', alignItems: 'center', backgroundColor: 'white' }}>
                <Flex gap="small" wrap>
                    <Button
                        style={{ height: '31.99px ', width: '63.84px' }}
                        onClick={() => {
                            window.location.href = '/list';
                        }}
                        type="primary"
                        className="out-button"
                    >
                        返回
                    </Button>
                </Flex>
                {/* <div className="demo-logo" /> */}
                {/* <Row> */}
                {/* <col> */}
                <Flex align='middle' justify='end' style={{ flex: 1 }} gap="small" wrap>
                    <Button type="primary" onClick={() => { window.location.href = '/edit'; }}>编辑</Button>
                    {/* 发起审核 */}
                    <AuditModeal />
                    {/* 审批通过 */}
                    <PassModeal />
                    {/* 审批驳回 */}
                    <OverruleModal />
                    <Button type="primary" onClick={() => {
                        window.location.href = '/list';
                    }} >上线</Button>
                </Flex>
                {/* </col>
                </Row> */}

            </Header>
            <Content style={{ padding: '0 48px' }}>
                <Breadcrumb style={{ margin: '16px 0' }}>

                </Breadcrumb>
                <div
                    style={{
                        background: colorBgContainer,
                        minHeight: 500,
                        padding: 24,
                        borderRadius: borderRadiusLG,
                    }}
                >
                    <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
                </div>
            </Content>
            <Footer style={{ textAlign: 'center' }}>

            </Footer>
        </Layout>
    );
};

export default Details;